<template>
    <view>
        <view class="page">
            <view class="set" @tap="goSet">
                <image src="../../../static/imgs/shezhi.png" mode=""></image>
            </view>
            <view class="mine">
                <view class="name" @tap="goEditData">
                    <view>
                        <text class="Han lgTitle">{{resume.name}}</text>
                    </view>
            
                    <view class="resume Han" style="align-items: center;display: flex;">
                        <image src="../../../static/imgs/edit.png" mode=""></image>
                        <text class="md4Text">我的在线简历</text>
                    </view>
                </view>
            
                <view class="photo" @tap="_toView('login/step1')">
                    <image :src="resume.avatar_url"></image>
                </view>
            </view>
            
            <!-- 常用功能 -->
            <view class="funs">
                <view class="funs_card">
                    <view class="title mdTitle Han">
                        常用功能
                    </view>
            
                    <view class="funsLine">
                        <view class="funsItem" @click="refresh">
                            <image src="../../../static/imgs/refresh.png" mode=""></image>
                            <text class="funcName smTitle">简历刷新</text>
                            <text class="funcInfo md4Text">{{resume.refresh_time || '未刷新'}}</text>
                        </view>
            
                        <view class="funsItem" @click="show_state = true;">
                            <image src="../../../static/imgs/jobState.png" mode=""></image>
                            <text class="funcName smTitle">求职状态</text>
                            <text class="funcInfo md4Text">{{resume.state}}</text>
                        </view>
            
                        <view class="funsItem" @click="show_status = true;">
                            <image src="../../../static/imgs/resumeState.png" mode=""></image>
                            <text class="funcName smTitle">简历状态</text>
                            <text class="funcInfo md4Text">{{resume.status == 'normal' ? '推送模式' : '免扰模式'}}</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 其他功能 -->
            <view class="funs1">
                <view class="funs_card">
                    <view class="title mdTitle Han">
                        其他功能
                    </view>
            
                    <view class="funsLine">
                        <view class="funsItem" @click="recurit">
                            <image src="../../../static/imgs/emploee.png" mode=""></image>
                            <text class="funcName md6Text">我要招聘</text>
            
                        </view>
            
                        <view class="funsItem" @click="_toUrl('/index/index/document/id/9.html')">
                            <image src="../../../static/imgs/editInfo.png" mode=""></image>
                            <text class="funcName md6Tex">操作指南</text>
            
                        </view>
            
            
                    </view>
                </view>
            </view>
            
            <!-- 客服提示信息 -->
            
            <view class="serviceinfo mdText">
                <view class="">客服电话400-8899-762 工作时间9:30-18:30 </view>
                <view class="">未成年人投诉举报渠道同上</view>
                <view class=""><text @click="_toUrl('/index/index/document/id/5.html')">人力资源服务许可证</text> <text style="margin-left: 15rpx;" @click="_toUrl('/index/index/document/id/4.html')">营业执照</text></view>
            </view>
        </view>
        
        
        <u-action-sheet :actions="statusList" :closeOnClickOverlay="true" :closeOnClickAction="true" :show="show_status"
            @select="setStatus" @close="show_status = false;"></u-action-sheet>
        <u-picker :show="show_state" :columns="stateList"
            :defaultIndex="[stateList[0] && resume && stateList[0].indexOf(resume.state) !== -1 ? stateList[0].indexOf(resume.state) : 0]"
            @confirm="setState" @cancel="show_state = false;"></u-picker>

        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                resume: false,

                show_status: false,
                statusList: [{
                        name: '推送模式',
                        subname: "您的求职将会被企业看到，并主动向您打招呼",
                        status: 'normal'
                    },
                    {
                        name: '免扰模式',
                        subname: "企业无法与您打招呼，需要您主动联系企业",
                        status: 'hidden'
                    },
                ],

                show_state: false,
                stateList: [],
            };
        },

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function(options) {
            this.getState();
            this.getResume();
        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function() {},

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function() {
            var resume = uni.getStorageSync('resume');
            if(resume) {
                this.resume = resume;
                this.setStatusList();
            }
        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function() {},

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function() {},

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function() {},

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function() {},

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function() {},
        methods: {
            getResume() {
                this._ajax({
                    url: '/api/user/resume',
                    success: res => {
                        if (res.code == 1) {
                            uni.setStorageSync('resume', res.data);
                            this.resume = res.data;
                            this.setStatusList();
                        }
                    }
                })
            },
            setStatusList() {
                for(var i in this.statusList) {
                    if(this.statusList[i].status == this.resume.status) {
                        this.statusList[i].color = '#3465B1';
                    }else {
                        this.statusList[i].color = '#000';
                    }
                }
            },
            setStatus(e) {
                console.log(JSON.stringify(e));
                this.show_status = false;
                if (e.status != this.resume.status) {
                    this._ajax({
                        url: '/api/user/setResumeStatus',
                        data: {
                            status: e.status
                        },
                        success: res => {
                            if (res.code == 1) {
                                this.resume.status = e.status;
                                this.getResume();
                            } else {
                                this._toast(res.msg);
                            }
                        }
                    }, 1);
                }
            },
            getState() {
                var stateList = uni.getStorageSync('stateList');
                if (stateList) {
                    this.stateList = [stateList];
                }
                this._ajax({
                    url: '/api/index/getStateList',
                    success: res => {
                        if (res.code == 1) {
                            uni.setStorageSync('stateList', res.data);
                            this.stateList = [res.data];
                        }
                    }
                })
            },
            setState(e) {
                this.show_state = false;
                if (e.value[0] != this.resume.state) {
                    this._ajax({
                        url: '/api/user/setResumeState',
                        data: {
                            state: e.value[0]
                        },
                        success: res => {
                            if (res.code == 1) {
                                this.resume.state = e.value[0];
                                this.getResume();
                            } else {
                                this._toast(res.msg);
                            }
                        }
                    }, 1);
                }
            },
            refresh() {
                this._ajax({
                    url: '/api/user/refresh',
                    success: res => {
                        this._toast(res.msg);
                        if (res.code == 1) {
                            this.getResume();
                        }
                    }
                }, 1);
            },


            goSet() {
                uni.navigateTo({
                    url: '/pages/views/mine/setting'
                })
            },

            hasChoosed() {
                this.modalShow = false;
            },

            showResume() {
                this.modalShow = true;
            },
            goEditData() {
                uni.navigateTo({
                    url: '/pages/views/mine/editData'
                })
            },
            recurit() {
                uni.navigateTo({
                    url: '/pages/views/mine/perfectData'
                })
            }
        }
    };
</script>
<style scoped lang="less">
    .page {
        width: 100%;
        background-image: url('../../../static/imgs/mineBg.png');
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
        background-color: #f9f9f9;
        min-height: 100vh;
        box-sizing: border-box;
        padding-top: calc(60rpx + var(--status-bar-height));
        padding-bottom: 20rpx;
        display: flex;
        flex-direction: column;

        .set {
            padding: 0 30rpx;
            display: flex;

            image {
                width: 40upx;
                height: 40upx;
                margin-left: auto;
            }
        }


        .mine {
            width: 100%;
            margin-top: 60rpx;
            display: flex;
            align-items: center;
            padding: 0 50rpx;

            .name {
                color: #FFFFFF;
                flex: 1;
            }

            .photo {
                width: 140upx;
                height: 140upx;
                position: relative;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .resume {
                margin-top: 20rpx;

                image {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 10rpx;
                }
            }
        }

        .funs {
            width: 100%;
            padding: 0 30rpx;
            margin-top: 30rpx;

            .funs_card {
                width: 100%;
                border-radius: 16rpx;
                background-color: #fff;
                padding: 30rpx;

                .title {}

                .funsLine {
                    display: flex;
                    padding: 0 30rpx;
                    justify-content: space-between;

                    .funsItem {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin-top: 50upx;

                        image {
                            width: 80rpx;
                            height: 80rpx;
                        }

                        text {
                            text-align: center;
                        }

                        .funcName {
                            color: #333;
                            padding-bottom: 10rpx;
                        }

                        .funcInfo {
                            color: #999999;
                        }
                    }
                }
            }
        }

        .funs1 {
            width: 100%;
            padding: 0 30rpx;
            margin-top: 30rpx;
            margin-bottom: 30rpx;

            .funs_card {
                width: 100%;
                border-radius: 16rpx;
                background-color: #fff;
                padding: 30rpx;

                .title {}

                .funsLine {
                    display: flex;
                    margin-top: 30rpx;

                    .funsItem {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        width: 25%;

                        image {
                            width: 80upx;
                            height: 80upx;
                        }

                        text {
                            text-align: center;
                        }

                        .funcName {
                            color: #666;
                            padding-bottom: 10rpx;

                        }

                    }
                }
            }
        }

        .serviceinfo {
            color: #aaa;
            width: 100%;
            margin-top: auto;
            padding-bottom: calc(30rpx + var(--window-bottom));

            view {
                text-align: center;
                padding-top: 12upx;
            }
        }
    }
</style>
